import { eqV1ControllerShow, eqV1ControllerTop10 } from '@/services/auto/eq';
import { css } from '@emotion/react';
import { Link } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Button, List, Modal, Segmented, Space, Typography } from 'antd';
import { Fragment, memo } from 'react';
import Item from './Item';
import AddDiffBtn from '@/components/AddDiffBtn';
import Rate from '@/components/Rate';
import { earBudsWearingMethod } from 'common/utils/data';

interface Top10ModalProps {
  uuid: string;
  onCancel: () => void;
}

function Top10Modal(props: Top10ModalProps) {
  const { onCancel, uuid } = props;

  // 请求EQ数据
  const { data: eqData, loading: eqLoading } = useRequest(() =>
    eqV1ControllerShow({ uuid: uuid }),
  );

  // 请求top10
  const { data: top10Data, loading: top10Loading, runAsync: top10Run } = useRequest(
    eqV1ControllerTop10,
    {
      ready: !!eqData?.points,
      defaultParams: [{ data: eqData?.points! }],
    },
  );

  return (
    <Modal
      open={true}
      title={
        <div className='flex gap-[8px] items-center'>
          <span>相似调音</span>
          <Segmented
            disabled={top10Loading}
            onChange={(val)=>{
              top10Run({ targetWearingMethod: val, data: eqData?.points! });
            }}
            options={[
              {
                label: '全部',
                value: undefined,
              },
              ...earBudsWearingMethod.$listSelect,
            ]}
          />
        </div>
      }
      onCancel={onCancel}
      width={1200}
      loading={eqLoading}
      okButtonProps={{
        style: {
          display: 'none',
        }
      }}
      cancelText='关闭'
    >
      <Space className="mb-[8px]">
        <Typography.Text>
          当前调音: {eqData?.name}
        </Typography.Text>
        {
          eqData?.uuid && <AddDiffBtn eqUuid={eqData?.uuid} badgeProps={{
            offset: [-15, 8]
          }}>
            <Button type="link">
              添加对比
            </Button>
          </AddDiffBtn>
        }
      </Space>

      <Rate.TagProvider>
        <List
          itemLayout="vertical"
          loading={top10Loading}
          dataSource={top10Data ?? []}
          rowKey="uuid"
          renderItem={(item, index) => {
            return <Item item={item} index={index} />;
          }}
          style={{
            padding: '16px',
            backgroundColor: '#f5f5f5'
          }}
          css={css`
          .ant-list-items>a:not(:last-of-type) .ant-list-item {
            margin-bottom: 16px;
          }
        `}
        />
      </Rate.TagProvider>
    </Modal>
  );
}

export default memo(Top10Modal);
